<template>
  <div class="allpage">
    <el-form :inline="true" :model="formInline" ref="formInline" class="form-style ">
      <el-form-item prop="name" style="margin:15px 0 15px 30px">
        <el-input v-model="formInline.name" placeholder="申请人姓名"></el-input>
      </el-form-item>
      <el-form-item prop="phoneNumber" style="margin:15px 0 15px 30px">
        <el-input v-model="formInline.phoneNumber" placeholder="申请人手机号"></el-input>
      </el-form-item>
       <el-form-item prop="createTime" style="margin:15px 0 15px 30px">
        <el-date-picker
          type="date"
          v-model="formInline.createTime"
          @change="getSTime"
          placeholder="选择创建时间"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
       </el-form-item>
      <el-form-item style="margin:15px 0 15px 30px">
        <el-button icon="el-icon-refresh" type="warning" @click="clean('formInline')">重置</el-button>
        <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-style">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="SCId" label="编号" width="100"></el-table-column>
        <el-table-column prop="TrueName" label="申请人" width="150"></el-table-column>
        <el-table-column prop="PhoneNumber" label="手机号码" width="150"></el-table-column>
        <el-table-column label="身份证图片" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.IDCard === null" style="color:red">该团长无提供身份证</div>
            <div v-else class="sup-mid-img" v-for="(item, index) in scope.row.IDCard" :key="index">
              <el-image v-image-preview style="width: 50px; height: 50px" :src="item"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="150">
          <template slot-scope="scope">
            <p v-show="scope.row.IsCheckStr === '已通过'" style="color:green">已通过</p>
            <p v-show="scope.row.IsCheckStr === '未通过'" style="color:red">未通过</p>
          </template>
        </el-table-column>
        <el-table-column prop="CreateTime" label="创建时间"></el-table-column>
        <el-table-column prop="CheckTime" label="审核时间"></el-table-column>
      </el-table>
      <botpage
      class="botpage-style"
      :currentPage="currentPage"
      :PageSize="PageSize"
      :total="total"
      @handleCurrentChange="currentChange"
      @handleSizeChange="pageSizeChange"
    />
    </div>
  </div>
</template>

<script>
import Toppage from "@/components/toppage/Toppage";
import Botpage from "@/components/botpage/Botpage";
import { LoadSalesManCheck } from "@/request/api";
export default {
  components: {
    Toppage,
    Botpage,
  },
  created() {
    this.getTableData();
  },
  methods: {
    getTableData() {
      LoadSalesManCheck({
        SreachValues: this.formInline.name,
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        OS: "PC",
        CustomerId: 1,
      })
        .then((res) => {
           if (res.StatusCode === 200) {
          this.tableData = res.Data;
          this.currentPage = res.PageIndexs;
          this.PageSize = res.PageCount;
          this.total = res.DataCounts;
          // let tempUrl = res.Data;
          var that = this;
          for (let i in this.tableData) {
            if (
              this.tableData[i].IDCard !== null &&
              this.tableData[i].IDCard !== "" &&
              this.tableData[i].IDCard !== undefined
            ) {
              that.tableData[i].IDCard = that.tableData[i].IDCard.split("|");
              console.log(
                "======that.tableData[i].IDCard====",
                that.tableData[i].IDCard
              );
            }
          }
          console.log("this.tableData", this.tableData);
           };
          for ( let j in this.tableData ) {
              that.tableData[j].CreateTime = this.tableData[j].CreateTime.replace(/(\/)/g,'-');
            };
          for ( let o in this.tableData ) {
            that.tableData[o].CheckTime = this.tableData[o].CheckTime.replace(/(\/)/g,'-');
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    currentChange(event) {
      this.currentPage = event;
      this.getTableData();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableData();
    },
    clean(formInline) {
      this.$refs[formInline].resetFields();
      this.getTableData()
    },
    search() {
      this.getTableData();
    },
    getSTime(val){
      this.formInline.createTime = val
      console.log(this.formInline.createTime)
    }
  },

  data() {
    return {
      formInline: {},
      currentPage: 1,
      PageSize: 10,
      total: 1,
      tableData: [],
    };
  },
};
</script>

<style lang="less" scoped>
  .sup-mid-img {
    float: left;
    margin-left: 5px;
    justify-content: space-between;
}
</style>
